<template>
  <div>
    <div class="zd3">
      <div class="zd3-title">
				<p>
					<span>分类名称</span>
					<input v-model="title" type="text" placeholder="请输入分类名称" />
				</p>
				<el-button size="small" type="success" @click="getlist">查询</el-button>
        <el-button size="small" @click="resetList">重置</el-button>
        <el-button size="small" type="primary" @click="addHanlderOne">新增一级分类</el-button>
      </div>
      <div class="zd3-btm">
        <el-table
          :data="tableData"
					border
          v-loading="loading"
          style="width: 100%;border-radius: 8px;"
        >
					<el-table-column type="index" align="center" label="序号" width="80" />
					<el-table-column type="expand">
					  <template slot-scope="props" v-if="props.row.children">
							<el-table :data="props.row.children" border :show-header="false" style="width: 100%">
								<el-table-column align="center" prop="title" label="分类名称"/>
								<el-table-column align="center" width="250" label="操作">
								  <template slot-scope="scope">
                    <!-- <el-button type="text" size="small" @click="lookClass(scope.row)">课程详情</el-button> -->
										<el-button type="text" size="small" @click="writeTwoClassify(scope.row)">编辑</el-button>
										<el-button type="text" size="small" @click="deleterTwoClassify(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="kechengguanli(scope.row,props.row)">课程管理</el-button>
                    <!-- <el-popover placement="bottom" width="160">
                      <div class="morehandle">
                        <el-button type="text" size="small" @click="miaoshu(scope.row)">描述管理</el-button>
                        <el-button type="text" size="small" @click="kechengguanli(scope.row,props.row)">课程管理</el-button>
                      </div>
                      <el-button type="text" size="mini" slot="reference">
                        更多操作
                        <i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                    </el-popover> -->
								  </template>
								</el-table-column>
							</el-table>
					  </template>
					</el-table-column>
          <el-table-column align="center" prop="title" label="分类名称"/>
          <!-- <el-table-column align="center" prop="insertTime" label="插入时间"/> -->
					<el-table-column align="center" width="250" label="操作">
					  <template slot-scope="scope" v-if="!scope.row.currentPage">
							<el-button type="text" size="small" @click="writeOneClassify(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="addHanlderTwo(scope.row)">添加二级分类</el-button>
							<el-button type="text" size="small" @click="deleterOneClassify(scope.row)">删除</el-button>
					  </template>
					</el-table-column>
        </el-table>
        <el-pagination
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="total"
          @prev-click="goPrev"
          @next-click="goNext"
        />
      </div>
    </div>
    <!-- 一级分类 -->
    <el-dialog
      :visible.sync="oneShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="true"
      width="65%"
    >
      <div class="change">
        <p>
          <span>一级分类名称</span>
          <el-input type="text" v-model="oneClasslist.title" class="userselect" placeholder="请输入一级分类名称" />
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="oneShow = false">取消</el-button>
        <el-button type="primary" @click="saveOne">保存</el-button>
      </div>
    </el-dialog>
    <!-- 二级分类名称 -->
    <el-dialog
      :visible.sync="twoShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :modal="true"
      width="65%"
    >
      <div class="change">
        <p>
          <span>二级分类名称</span>
          <el-input type="text" v-model="twoClasslist.title" class="userselect" placeholder="请输入二级分类名称" />
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="twoShow = false">取消</el-button>
        <el-button type="primary" @click="saveTwo">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { importFenlei,addOneClassify,addTwoClassify,threeList } from '@/api/people'
export default {
  props: {
    isFenlei: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      tableData:[],
      title: '',  //分类搜索名称
      total: 1,
      loading: false,
      oneClasslist: {},
      twoClasslist: {},
      oneShow: false,    //一级分类弹框显示
      twoShow: false,    //二级分类弹框显示
      oneTempIndex: -1,  //一级分类增加还是修改标识符
      twoTempIndex: -1,  //一级分类增加还是修改标识符
    }
  },
  watch: {
    isFenlei: function(newValue,oldValue){
      console.log('fenlei',newValue,oldValue)
      if(newValue){
        this.getlist()
      }
    }
  },
  mounted(){
    this.getlist()
  },
  methods: {
    /**
     * 搜索
     */
    search(){
      
    },
    // 重置搜索
    resetList(){
      this.title = ''
    },
    /**
     * 获取分类列表
     */
    getlist(){
      this.loading = true
      threeList().then(res => {
        console.log(res)
        this.tableData = res.data.items
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 新增一级分类
     */
    addHanlderOne(){
      this.oneShow = true
      this.oneTempIndex = -1
    },
    /**
     * 新增一级分类
     */
    addHanlderTwo(item){
      this.twoShow = true
      this.twoTempIndex = -1
      this.twoClasslist.parentId = item.id
    },
    /**
     * 编辑一级分类
     */
    writeOneClassify(item){
      this.oneShow = true
      this.oneClasslist = {...item}
      this.oneTempIndex = 1
    },
    /**
     * 编辑二级分类
     */
    writeTwoClassify(item){
      this.twoShow = true
      this.twoClasslist = {...item}
      this.twoTempIndex = 1
    },
    /**
     * 查看视频详情
     */
    lookClass(item){
      this.$router.push({
        name: 'Zhangjie',
        params: {
          options: JSON.stringify(item)
        }
      })
    },
    /**
     * 描述管理
     */
    kechengguanli(two,one){
      let ids = {
        oneId: one.id,
        twoId: two.id
      }
      localStorage.setItem('ids',JSON.stringify(ids))
      this.$router.push({
        name: 'Kecheng'
      })
    },
    /**
     * 章节管理
     */
    zhangjie(item){
      this.$router.push({
        name: 'Zhangjieguanli',
        params: {
          options: JSON.stringify(item)
        }
      })
    },
    /**
     * 删除一级分类
     */
    deleterOneClassify(){

    },
    /**
     * 删除二级分类
     */
    deleterTwoClassify(){

    },
    /**
     * 保存一级分类编辑结果
     */
    saveOne(){
      if(this.oneTempIndex !== -1){
        addOneClassify(this.oneClasslist).then(res => {
          this.$message({
            message: res.message,
            type: 'success',
            showClose: true
          })
        })
      }else{
        // console.log(+new Date(),Math.round(Math.random()*1000))
        // 获取不重复得id,当前时间戳数
        const _id = +new Date()
        this.oneClasslist.id = _id
        this.oneClasslist.parentId = 0
        addOneClassify(this.oneClasslist).then(res => {
          console.log(res)
          this.oneShow = false
          this.$message({
            message: res.message,
            type: 'success',
            showClose: true
          })
          this.getlist()
        })
      }
      
    },
    /**
     * 保存二级分类编辑结果
     */
    saveTwo(){
      if(this.twoTempIndex !== -1){
        addOneClassify(this.twoClasslist).then(res => {

        })
      }else{
        this.twoClasslist.id = +new Date()
        addTwoClassify(this.twoClasslist).then(res => {
          console.log(res)
          this.twoShow = false
          this.$message({
            message: res.message,
            type: 'success',
            showClose: true
          })
          this.getlist()
        })
      }
      
    },
    /**
     * 上一页
     */
    goPrev(){

    },
    /**
     * 下一页
     */
    goNext(){

    },
  }
}
</script>

<style scoped lang="scss">

/deep/.el-table--medium td {
  padding: 0px;
}
/deep/.el-table__expanded-cell[class*=cell] {
	padding: 0 0 0 128px;
}
/deep/[data-v-70245f58] .el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
.morehandle {
  display: flex;
  flex-direction: column;
}
.morehandle .el-button--text{
  color: #18a05e;
  margin-left: 0;
}
.zd3-title {
	height: 70px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	position: relative;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);

	> p {
		font-size: 14px;
		color: #333;
		margin-right: 20px;

		> span {
			padding-right: 20px;
		}

		> input {
			width: 150px;
			height: 32px;
			// background: #ccc;
			border-radius: 3px;
			border: 1px solid #ccc;
			padding-left: 10px;
			color: #333;
		}
	}

	> h3 {
		// width: 64px;
		height: 32px;
		background: #18a05e;
		border-radius: 3px;
		margin: 0 30px 0 0;
		padding: 0 15px;
		color: #fff;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}

	> h4 {
		padding: 0 15px;
		height: 32px;
		border-radius: 3px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: #333;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}
}
.zd3-btm /deep/.btn-prev::after {
  content: "";
}
.zd3-btm /deep/.btn-prev::before {
  content: "上一页";
}
.zd3-btm /deep/.btn-next::before {
  content: "下一页";
}
.zd3-btm /deep/.btn-next::after {
  content: "";
}
.zd3-btm /deep/.btn-prev,
.zd3-btm /deep/.btn-next {
  width: 80px;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  // border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .el-pagination {
		white-space: nowrap;
		padding: 15px 5px;
		color: #303133;
		font-weight: bold;
	}
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.25);
  }
  .el-pagination{
    margin: 15px;
    text-align: right;
  }
  .el-button--text {
    margin: 7px 5px;
  }
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
</style>